<template>
  <div class="login">
    <div class="login-form">
      <vue-particles id="tsparticles" :options="particlesOption" />
      <div class="title-box">
        <h3 class="title">{{ title }}</h3>
        <lang-select />
      </div>
      <Password ref="passwordRef" />
      <Mobile />
      <Register />
      <QrCode />
      <ResetPas />
      <div v-if="isAccountLogin">
        <div class="login-state-container">
          <el-button style="flex: 1" plain :title="proxy.$t('login.smsLoginPage')" @click="setLoginState(LoginStateEnum.MOBILE)">
            <span>{{ proxy.$t('login.smsLoginPage') }}</span>
          </el-button>
          <el-button style="flex: 1; margin: 0" plain :title="proxy.$t('login.qrcodeLoginPage')" @click="setLoginState(LoginStateEnum.QR_CODE)">
            <span>{{ proxy.$t('login.qrcodeLoginPage') }}</span>
          </el-button>
          <el-button style="flex: 1; margin: 0" plain :title="proxy.$t('login.switchRegisterPage')" @click="setLoginState(LoginStateEnum.REGISTER)">
            <span>{{ proxy.$t('login.switchRegisterPage') }}</span>
          </el-button>
        </div>
        <el-divider>{{ proxy.$t('login.thirdLoginPage') }}</el-divider>
        <div style="text-align: center">
          <el-form-item style="display: inline-block">
            <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">
              <svg-icon icon-class="wechat" />
            </el-button>
            <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">
              <svg-icon icon-class="gitee" />
            </el-button>
            <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">
              <svg-icon icon-class="github" />
            </el-button>
          </el-form-item>
        </div>
      </div>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2018-2025 shuai.zhou All Rights Reserved.</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const title = import.meta.env.VITE_APP_TITLE;
import { authBinding } from '@/api/system/social/auth';
import { HttpStatus } from '@/enums/RespEnum';
import { LoginStateEnum, useLoginState } from './components/loginState';
import { particlesOption } from './components/particles-config';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

import Password from './components/password.vue';
import Mobile from './components/mobile.vue';
import Register from './components/register.vue';
import QrCode from './components/qrcode.vue';
import ResetPas from './components/resetPas.vue';

const passwordRef = ref(null);
const { getLoginState, setLoginState } = useLoginState();

// 是否是账号密码登录
const isAccountLogin = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

/**
 * 第三方登录
 * @param type
 */
const doSocialLogin = (type: string) => {
  const tenantId = passwordRef.value.tenantId;
  authBinding(type, tenantId).then((res: any) => {
    if (res.code === HttpStatus.SUCCESS) {
      // 获取授权地址跳转
      window.location.href = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url('@/assets/images/login-background.jpg');
  background-size: cover;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
